<html>

<head>
    <style>
        #keyboard {
            background-color: rgb(51 51 51);
            border-radius: 0 0 6px 6px;
            width: 1184px;
            position: absolute;
            height: 230px;
        }

        .key {
            user-select: none;
            position: absolute;
            top: 60px;
            display: inline-block;
        }

        .whiteKey {
            border-right: rgb(66, 66, 66) 1px solid;
            width: 21px;
            height: 150px;
            border-radius: 0 0 2px 2px;
            background-color: #fff;
        }

        .blackKey {
            background-color: #000;
            width: 14px;
            height: 106px;
            border-radius: 0 0 2px 2px;
            z-index: 1;
        }

        .keyName {
            font-size: 8px;
            color: #000;
            text-align: center;
            position: absolute;
            bottom: 3px;
            width: 21px
        }

        #logo {
            font-size: 24px;
            color: #4e4e4e;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 15px;
        }
    </style>
</head>

<body>
    <script src="./src/index.js"></script>
</body>

</html>